<template>
	<view>
		<view class="num">
			<ul class="num-num">
				<li>{{xuqiu}}</li>
				<li>{{gongying}}</li>
			</ul>
			<ul class="num-title">
				<li>市场需求人数</li>
				<li>市场供应人数</li>
			</ul>
		</view>
	</view>
</template>

<script>
	export default {
		name: "myled",
		data() {
			return {
				xuqiu: 55555,
				gongying: 66666,
			};
		},
		mounted() {
			this.init();
		},
		methods:{
			init() {
				const me = this;		// 处理回调中无法访问this的问题
				
				uni.request({
					url: me.baseUrl + '/api/dashboard/gongxu',
					method:"GET",
					success(res) {
						console.log(res.data);
						if (res.statusCode == 200) {
							if (res.data.status == 200) {
								me.xuqiu = res.data.xuqiu;
								me.gongying = res.data.gongying;
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
	
	@font-face {
		font-family: myfont;
		src: url(../static/fonts/DS-DIGIT.TTF);
	}
	.num {
		background-color: rgba(101, 132, 226, 0.1);
		padding: 30upx;
		border: 1px solid rgba(25, 186, 139, 0.17);
		margin-left: 20upx;
		margin-right: 20upx;

		.num-num {
			display: flex;

			li {
				list-style: none;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;

				height: 160upx;
				font-size: 140upx;
				color: #ffeb7b;
				font-family: myfont;
			}
		}

		.num-title {
			display: flex;

			li {
				flex: 1;
				list-style: none;
				display: flex;
				justify-content: center;
				align-items: center;

				height: 80upx;
				color: rgba(255, 255, 255, 0.7);
				font-size: 36upx;
				padding-top: 20upx;
			}
		}
	}
</style>